true
<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view class="container">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				color="#9F9F9F"
				:border="false"
				:shadow="false"
				background-color="#F1F1F1"
				@clickLeft="gaoback"
				@clickRight="showSetUp"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#9F9F9F" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<!-- 标题 -->
		<view class="titleBox">
			<view class="titleBoxcenter">
				<text>{{ i18n.ctwfont14 }}</text>
			</view>
		</view>
		<!-- 角色 -->
		<uni-row class="roleBox">
			<uni-col :span="11">
				<view class="roleItem" @tap="goNewRegister">
					<view style="display: flex; flex-direction: column; align-items: center;">
						<!-- <uni-icons class="nameIcon" color="#fff" type="person" size="60" /> -->
						<view class="yuangBox">
							<image class="nameIcon" style="width: 100%; height: 100%;" mode="scaleToFill" src="../../static/icon/OneDrive_7_11-16-2021/2x/ic_user01@2x.png"></image>
						</view>
						<view style="font-size: $uni-font-size-custom-f; color:#fff;">{{ i18n.ctwfont16 }}</view>
					</view>
				</view>
			</uni-col>
			<uni-col :span="11" :push="2">
				<view class="roleItem" @tap="goNewIdentification">
					<view style="display: flex; flex-direction: column; align-items: center;">
						<!-- <uni-icons class="nameIcon" color="#fff" type="personadd" size="60" /> -->
						<view class="yuangBox">
							<image class="nameIcon" style="width: 100%; height: 100%;" mode="scaleToFill" src="../../static/icon/OneDrive_7_11-16-2021/2x/ic_user02@2x.png"></image>
						</view>
						<view style="font-size: $uni-font-size-custom-f; color:#fff;">{{ i18n.ctwfont17 }}</view>
					</view>
				</view>
			</uni-col>
		</uni-row>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			popupIsShow: false, // 打开设置的标识
			signOutShow: false // 退出登录
		};
	},

	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onShow() {},
	created() {},
	onHide() {},
	computed: {
		i18n() {
			return this.$t('login');
		}
	},
	components: { setUpPages, signOut },
	methods: {
		// 回退
		gaoback() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: `/pages/home/index`
			});
			// #endif
			// #ifdef H5
			this.$Router.push(`/pages/home/index`);
			// #endif
			// const pages = getCurrentPages();
			// if (pages.length > 1) {
			// 	uni.navigateBack({
			// 		delta: 1
			// 	});
			// }
		},
		goBackBox() {
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			if (data) {
				// const pages = getCurrentPages();
				// if (pages.length > 1) {
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// }
				// #ifdef APP-PLUS
				uni.redirectTo({
					url: `/pages/home/index`
				});
				// #endif
				// #ifdef H5
				this.$Router.push(`/pages/home/index`);
				// #endif
			}
		},
		// 新客户注册账号
		goNewRegister() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: `/pages/logins/registerSubmit`
			});
			// #endif
			// #ifdef H5
			this.$Router.push(`/pages/logins/registerSubmit`);
			// #endif
		},
		// 身份认证
		goNewIdentification() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: `/pages/logins/Identification`
			});
			// #endif
			// #ifdef H5
			this.$Router.push(`/pages/logins/Identification`);
			// #endif
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	.titleImg {
		width: 60px;
		height: 30px;
		margin: 0 auto;
		border-radius: 50%;
		overflow: hidden;
	}
	.leftIconBox {
		width: 25px;
		height: 25px;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15px;
	}
	.topBox {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		// 顶部部分
		.status_bar {
			height: var(--status-bar-height);
			background-color: #f1f1f1;
			width: 100%;
		}
	}
	.titleBox {
		margin-top: 120px;
		margin-bottom: 50px;
		display: flex;
		justify-content: center;
		.titleBoxcenter {
			width: 90%;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			text-align: center;
			background-color: #f2f2f2;
		}
	}
	.roleBox {
		padding: 0 20px;
		box-sizing: border-box;
		.roleItem {
			height: 200px;
			background-color: #CD001B;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			text-align: center;
			.yuangBox {
				position: relative;
				width: 90px;
				height: 90px;
				border-radius: 50%;
				margin: 30px 0 10px 0;
				background-color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				.nameIcon {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
			.yuangBox::before {
				content: '';
				display: inline-block;
				width: 85px;
				height: 85px;
				border-radius: 50%;
				background-color: #CD001B;
			}
		}
	}
}
</style>
